<template>
  <div id="decision-sqmap" @click="onMap($event)"></div>
</template>

<script>
import echarts from "echarts";
import suqianGeoJson from "../common/suqian";
import suchengGeoJson from "../common/sucheng";
import susuGeoJson from "../common/susu";
import jingkaiGeoJson from "../common/jingkai";
import yangheGeoJson from "../common/yanghe";
import suyuGeoJson from "../common/suyu";
import hubinGeoJson from "../common/hubin";
import shuyangGeoJson from "../common/shuyang";
import siyangGeoJson from "../common/siyang";
import sihongGeoJson from "../common/sihong";

import "echarts-gl";

export default {
  name: "",
  data() {
    return {
      result: {},
      sentiment: {},
      regionIndex: 0,
      mapName: "宿城区",
      mapClick: false,
      mapCurrent: 0,
    };
  },
  watch: {
    mapCurrent() {
      this.initMapChange();
    },
  },
  components: {},
  mounted() {
    this.initMap();
    window.addEventListener("resize", this.screenAdapter);
    this.screenAdapter();
  },
  destroyed() {
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    screenAdapter() {
      this.echartMap.resize();
    },
    initMap() {
      this.echartMap = echarts.init(document.getElementById("decision-sqmap"));

      echarts.registerMap("suqian", suqianGeoJson);
      echarts.registerMap("sucheng", suchengGeoJson);
      echarts.registerMap("susu", susuGeoJson);
      echarts.registerMap("jingkai", jingkaiGeoJson);
      echarts.registerMap("yanghe", yangheGeoJson);
      echarts.registerMap("suyu", suyuGeoJson);
      echarts.registerMap("hubin", hubinGeoJson);
      echarts.registerMap("shuyang", shuyangGeoJson);
      echarts.registerMap("siyang", siyangGeoJson);
      echarts.registerMap("sihong", sihongGeoJson);

      const option = {
        series: [
          {
            type: "map3D",
            name: "map3D",
            map: "suqian",
            // 标签的样式
            label: {
              show: true,
              textStyle: {
                fontSize: 15,
                color: "#fff",
                opacity: 1,
                backgroundColor: "rgba(0,23,11,0)",
              },
            },
            // 图形的样式
            itemStyle: {
              color: "rgba(0,188,188,0.4)",
              opacity: 1,
              borderWidth: 0.5,
              borderColor: "#000",
            },
            // 鼠标触碰的样式
            emphasis: {
              label: {
                show: true,
                distance: 5000,
                textStyle: {
                  color: "#101e4f",
                },
              },
              itemStyle: {
                color: "#bfe0ff",
              },
            },

            viewControl: {
              projection: "orthographic",
              autoRotate: false,
              autoRotateDirection: "cw",
              autoRotateSpeed: 10,
              autoRotateAfterStill: 3,
              damping: 0,
              rotateSensitivity: [0, 0],
              zoomSensitivity: 1,
              panSensitivity: 1,
              panMouseButton: "left",
              rotateMouseButton: "left",
              orthographicSize: 120,
              alpha: 46,
              beta: 0,
              minBeta: -360000000,
              maxBeta: 360000000,
            },
          },
        ],
      };
      this.echartMap.setOption(option);
      const geojsons = {
        宿城区: "sucheng",
        苏宿园区: "susu",
        经开区: "jingkai",
        洋河新区: "yanghe",
        宿豫区: "suyu",
        湖滨新区: "hubin",
        沭阳县: "shuyang",
        泗阳县: "siyang",
        泗洪县: "sihong",
      };
      // const regionIndexs = {
      //   宿城区: 3,
      //   苏宿园区: 1,
      //   经开区: 0,
      //   洋河新区: 4,
      //   宿豫区: 5,
      //   湖滨新区: 8,
      //   沭阳县: 6,
      //   泗阳县: 2,
      //   泗洪县: 7,
      // };

      const ctiynum1 = this.$window.ctiynum1
      const ctiynum2 = this.$window.ctiynum2
      const ctiynum3 = this.$window.ctiynum3
      const ctiynum4 = this.$window.ctiynum4

      this.echartMap.on("click", (params) => {
        this.mapName = params.name;
        this.mapClick = true;
        params.data = {
          num1: ctiynum1[params.name],
          num2: ctiynum2[params.name],
          num3: ctiynum3[params.name],
          num4: ctiynum4[params.name],
          title: params.name
        };
        // this.regionIndex = regionIndexs[params.name];
        console.log("this.regionIndex", params.data);
        this.$emit("listenToChildEvent", params.data);
        this.echartMap.setOption({
          series: [
            {
              map: geojsons[params.name],
              itemStyle: {
                color: "rgba(0,188,188,0.4)",
                opacity: 1,
                borderWidth: 0,
                borderColor: "#000",
              },
              data: [
                {
                  name: params.name,
                  label: {
                    textStyle: {
                      color: "#101e4f",
                    },
                  },
                  itemStyle: {
                    color: "#bfe0ff",
                  },
                },
              ],
            },
          ],
        });

        clearInterval(this.map3dInterval);

        setTimeout(() => {
          this.mapClick = false;
        }, 2000);
      });
    },
    initMapChange() {
      const regions = [
        "宿城区",
        "苏宿园区",
        "经开区",
        "洋河新区",
        "宿豫区",
        "湖滨新区",
        "沭阳县",
        "泗阳县",
        "泗洪县",
      ];

      const option = {
        series: [
          {
            map: "suqian",
            itemStyle: {
              color: "rgba(0,188,188,0.4)",
              opacity: 1,
              borderWidth: 0.5,
              borderColor: "#000",
            },
            data: [
              {
                name: regions[this.mapCurrent],
                label: {
                  textStyle: {
                    color: "#101e4f",
                  },
                },
                itemStyle: {
                  color: "#00dcdc",
                },
              },
            ],
          },
        ],
      };

      this.echartMap.setOption(option);
    },
    initMapInterval() {
      this.map3dInterval && clearInterval(this.map3dInterval);
      this.map3dInterval = setInterval(() => {
        this.mapCurrent++;
        if (this.mapCurrent > 8) {
          this.mapCurrent = 0;
        }
      }, 5000);
    },
    onMap() {
      if (!this.mapClick) {
        this.echartMap.setOption({
          series: [
            {
              map: "suqian",
              itemStyle: {
                color: "rgba(0,188,188,0.4)",
                opacity: 1,
                borderWidth: 0.5,
                borderColor: "#000",
              },
            },
          ],
        });

        this.mapName = "";
        this.regionIndex = 9;

        this.initMapInterval();
      }
    },
    objectToArray(obj) {
      let arr = [];

      for (let i in obj) {
        arr.push(obj[i]);
      }

      return arr;
    },
  },
};
</script>

<style scoped>
#decision-sqmap {
  width: 100%;
  height: 100%;
}
</style>
